<template>
	<view class="tt">
		<view class="content">
			<view class="container">
				<uni-card>
					<view class="order">
						<view class="itemm">{{ taskDetail.title }}</view>
						<text class="state">{{ getStatusText(taskDetail.status) }}</text>
					</view>
					<view class="time">订单号:{{ taskDetail.id }} </view>
					<view class="time">类型:{{ taskDetail.type }} </view>
					<view class="time">业务领域:{{ taskDetail.domain }} </view>
					<view class="time">联系方式:{{ taskDetail.title }}</view>
					<view class="details">
						<view class="time">创建时间:{{ taskDetail.updatedAt }}</view>

					</view>
					<view class="ff">
        <view class="hh">完工图片1:</view>
			<view @click="test1" class="cc">
				<image :src="pictures1" mode="" class="bb"></image>
			</view>
      <view class="hh">完工图片2:</view>
      <view @click="test2" class="cc">
				<image :src="pictures2" mode="" class="bb"></image>
			</view>
      <view class="hh">完工图片3:</view>
        <view @click="test3" class="cc">
				<image :src="pictures3" mode="" class="bb"></image>
			</view>
      <view class="hh">完工图片4:</view>
      <view @click="test4" class="cc">
      	<image :src="pictures4" mode="" class="bb"></image>
      </view>
      <view class="hh">完工图片5:</view>
      <view @click="test5" class="cc">
      	<image :src="pictures5" mode="" class="bb"></image>
      </view>
      <view class="hh">完工图片6:</view>
      <view @click="test6" class="cc">
      	<image :src="pictures6" mode="" class="bb"></image>
      </view>
      <view class="hh">完工图片7:</view>
      <view @click="test7" class="cc">
      	<image :src="pictures7" mode="" class="bb"></image>
      </view>
      <view class="hh">完工图片8:</view>
      <view @click="test8" class="cc">
      	<image :src="pictures8" mode="" class="bb"></image>
      </view>
      <view class="hh">完工图片9:</view>
      <view @click="test9" class="cc">
      	<image :src="pictures9" mode="" class="bb"></image>
      </view>
      <view class="hh">完工图片10:</view>
       <view @click="test10" class="cc">
      	<image :src="pictures10" mode="" class="bb"></image>
      </view>
			  </view>
					<view class="receiving" @click="uploadPicture(taskDetail.id)">提交工单</view>
				</uni-card>
				<view class="bot"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import messageApi from '@/api/task.js'
	import pictureApi from '@/api/picture'
const uploadAliyun = require('../../components/aliyunOss/upload/uploadAliyun.js');

	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	const taskDetail = ref({})
	const pictures = ref([]);
const pictures1 = ref('');
const pictures2 = ref('');
const pictures3 = ref('');
const pictures4 = ref('');
const pictures5 = ref('');
const pictures6 = ref('');
const pictures7 = ref('');
const pictures8 = ref('');
const pictures9 = ref('');
const pictures10 = ref('');
	const OrderID = ref([])
	// 获取地址参数
	onLoad((params) => {
		// 获取任务 ID 并获取详情数据
		getTaskDetail(params.id)
	})

	async function getTaskDetail(id) {
		// if (!id) return
		const res = await messageApi.detail(id)
		if (res.code === 200) {
			taskDetail.value = res.data
			OrderID.value = res.data.id
		} else {
			uni.showToast({
				title: "获取详情失败",
				icon: 'closeempty',
				duration: 2000 //持续的时间
			})
		}
		// 渲染数据
	}
	// 1.选择的图片
	// 1.选择的图片
	// 1.选择的图片
	function   test1() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/install",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `${getFormat(file)}`,
            success: (res) => {
              console.log(res,"上传图片");
				pictures1.value=res.oss_file
              console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }
  function   test2() {
     // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
     uni.chooseMedia({
       count: 1,//最多可以选择几张图片
       mediaType: ['image/jpg'],//图片类型
       sourceType: ['album', 'camera'],//可从相机、相册拿取
       success: (res) => {
         // 重点！这个就是临时路径！
         const file = res.tempFiles[0].tempFilePath
         // console.log(res.tempFiles[0].tempFilePath)
         // 上传前,要确保临时路径是正确的(开始上传到OSS)
         // 对于此api参数，详见uploadAliyun.js文件
         uploadAliyun({
             // 微信文件临时路径
             // 只要涉及到上传,这东西就一定会有!
             filePath: file,
             // 目录层级(可自由填写)
             // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
             dir: "upload/install",
             // 文件名及扩展名(可自由填写)
             // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
             name: `${getFormat(file)}`,
             success: (res) => {
               console.log(res,"上传图片");
  				pictures2.value=res.oss_file
				  console.log(pictures.value,"pictures.value")
             },
             fail: (err) => {
               console.log(err)
               console.log("上传失败")
             }
         })
       }
     })
   }
function   test3() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/install",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `${getFormat(file)}`,
            success: (res) => {
              console.log(res,"上传图片");
				pictures3.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }

function   test4() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/install",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `${getFormat(file)}`,
            success: (res) => {
				pictures4.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }

function   test5() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/install",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `${getFormat(file)}`,
            success: (res) => {
				pictures5.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }

function   test6() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/install",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `${getFormat(file)}`,
            success: (res) => {
				pictures6.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }

function   test7() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/install",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `${getFormat(file)}`,
            success: (res) => {
				pictures7.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }

function   test8() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/install",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `${getFormat(file)}`,
            success: (res) => {
				pictures8.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }

function   test9() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/install",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `${getFormat(file)}`,
            success: (res) => {
				pictures9.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }

function   test10() {
    // api文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
    uni.chooseMedia({
      count: 1,//最多可以选择几张图片
      mediaType: ['image/jpg'],//图片类型
      sourceType: ['album', 'camera'],//可从相机、相册拿取
      success: (res) => {
        // 重点！这个就是临时路径！
        const file = res.tempFiles[0].tempFilePath
        // console.log(res.tempFiles[0].tempFilePath)
        // 上传前,要确保临时路径是正确的(开始上传到OSS)
        // 对于此api参数，详见uploadAliyun.js文件
        uploadAliyun({
            // 微信文件临时路径
            // 只要涉及到上传,这东西就一定会有!
            filePath: file,
            // 目录层级(可自由填写)
            // 例如: test | a/b/c，但要注意!前后不能加"/"斜杠
            dir: "upload/install",
            // 文件名及扩展名(可自由填写)
            // 例如: name: 'phone.png',我这里直接取微信临时文件后缀名,自己拼接
            name: `${getFormat(file)}`,
            success: (res) => {
				pictures10.value=res.oss_file
				console.log(pictures.value,"pictures.value")
              console.log("上传成功")
            },
            fail: (err) => {
              console.log(err)
              console.log("上传失败")
            }
        })
      }
    })
  }
	// 1.选择的图片
	// 1.选择的图片
	// 1.选择的图片

	// 提交订单
// 提交订单
pictures.value.push(pictures1, pictures2, pictures3, pictures4, pictures5, pictures6, pictures7, pictures8, pictures9, pictures10);
	async function uploadPicture(id) {
		const res = await pictureApi.uploadPicture({
   fileUrlList: pictures.value
     .filter(picture => picture.value !== '') // 过滤掉为空字符串的数据
     .map(picture => picture.value), // 提取 URL 字符串
    fileType: 2,
    sheetId: id
  });

		if (res.code === 200) {
			const res = await messageApi.detail(id)
			taskDetail.value = { ...res.data, status: 4 };
			// console.log(taskDetail.value.status);
			// console.log(res);
			// 修改订单状态
			const ref = await messageApi.submitList(taskDetail.value)
			uni.showToast({
				title: "提交订单完成",
				icon: 'checkmarkempty',
				duration: 2000 //持续的时间
			})
			// 设置延时为3秒
			setTimeout(function() {
				// 3秒后切换到指定页面
				uni.navigateTo({url:"/subpkg_work/Beinginstalled/Beinginstalled"})
			}, 2000);
		}
		console.log(res);
	}

	function getStatusText(status) {
		switch (status) {
			case 0:
				return '待支付'
			case 1:
				return '勘测中'
			case 2:
				return '已勘测'
			case 3:
				return '安装中'
			case 4:
				return '已完成'
			case 5:
				return '已取消'
			case 6:
				return '退款中'
			case 7:
				return '已退款'
			default:
				return ''
		}
	}
  function getFormat(name) {
      return name.substring(name.lastIndexOf("/") + 1)
    }
</script>

<style lang="scss" scoped>
	.content {
		height: 100;
		background-color: #f5f5f5;
		padding-top: 20px;
	}
	.cc{
    margin-bottom: 10px;
  	width: 300px;
  	border: 1px solid #c7c9ce;
  	height: 200px;
  }
  .hh{
    margin-top: 10px;
  }
  .bb{
  	width: 300px;
  	height: 200px;
  }
	.container {
		margin-left: 2%;
	}

	.uni-card {
		border: 1px solid #ffffff;
		margin-left: 30px;
		width: 85%;
		background-color: #ffffff !important;
	}

	.order {
		display: flex;
		justify-content: space-between;
		color: #ffffff;
	}

	.state {
		color: #fe486e;
		padding-bottom: 10px;
	}

	.time {
		color: #7a7b75;
		font-size: 12px;
	}

	.itemm {
		color: #000;
	}

	.details {
		display: flex;
		justify-content: space-between;
	}

	.particulars {
		color: #fff;
		width: 100px;
		background-color: #8bc34a;
		text-align: center;
		border-radius: 50px;
		margin-bottom: 10px;
		margin-right: 10px;
	}

	.message-blank {
		width: 100%;
		text-align: center;
		margin-top: 30px;
	}

	.receiving {
		width: 100%;
		height: 10%;
		text-align: center;
		text-align: center;
		border: 1px solid #e85645;
		color: #fe4833;
		border-radius: 5px;
		margin-top: 10px;
	}

	.ff {
		border-top: 1px solid #f4f4f4;
	}

	.bot {
		padding-top: 50px;
	}
</style>
